<template>
<div class="app-container">
    <!--顶部查询栏-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="teacherQuery.name" placeholder="讲师名" />
        </el-form-item>

        <el-form-item>
            <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
                <el-option :value="1" label="高级讲师" />
                <el-option :value="2" label="首席讲师" />
            </el-select>
        </el-form-item>

        <el-form-item label="添加时间">
            <el-date-picker v-model="teacherQuery.begin" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
        </el-form-item>
        <el-form-item>
            <el-date-picker v-model="teacherQuery.end" type="datetime" placeholder="选择截止时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" />
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
        <el-table-column label="序号" width="70" align="center">
            <template slot-scope="scope">
                <!--计算id从1开始的式子 scope代表整个表格 通过scope.row可以得到每行中的内容-->
                {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>

        <el-table-column prop="name" label="名称" width="80" />

        <el-table-column label="头衔" width="80">
            <template slot-scope="scope">
                {{ scope.row.level===1?'高级讲师':'首席讲师' }}
            </template>
        </el-table-column>

        <el-table-column prop="intro" label="资历" />

        <el-table-column prop="gmtCreate" label="添加时间" width="160" />

        <el-table-column prop="sort" label="排序" width="60" />

        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <!--通过路由的方式修改讲师属性 需要配置路由规则-->
                <router-link :to="'/teacher/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>

                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper" @current-change="getList" />
</div>
</template>

<script>
//导入调用teacher.js文件
import teacher from "@/api/edu/teacher";
export default {
    data() {
        return {
            //定义变量和初始值
            page: 1,
            limit: 6,
            teacherQuery: {},
            total: 0,
            list: null,
        };
    },
    created() {
        //页面渲染之前执行
        this.getList();
    },
    methods: {
        getList(page = 1) {
            this.page = page;
            teacher
                .getPageTeacherList(this.page, this.limit, this.teacherQuery)
                .then((response) => {
                    this.list = response.data.rows;
                    this.total = response.data.total;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        resetData() {
            //将输入框内容清空
            this.teacherQuery = {};
            //获取讲师列表内容
            this.getList();
        },
        removeDataById(id) {
            this.$confirm("此操作将永久删除讲师信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                //执行删除讲师信息方法
                teacher.deleteDataById(id).then((response) => {
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                });
                //查询讲师列表
                this.getList();
            });
        },
    },
};
</script>
